<template>
	<view>
		<global-contact></global-contact>
	<!-- 	<view class="header">
			<view class="nav">
				<view :class="['item',{'active':needIndex==index}]" @click="needClick(index)" v-for="(item,index) in needList" :key="index">{{item.text}}</view>
			</view>
		</view> -->
		<view class="list">
			<scroll-view scroll-x="true" style="height: 64rpx;">
				<view class="ul">
					<view :class="['li', {'active':cateIndex==index}]" @click="categoryClick(item,index)" v-for="(item,index) in categoryList" :key="index">{{item.title}}</view>
			 
				</view>
			</scroll-view>
		</view>
		<view class="wrapper">
			<scroll-view scroll-y="true" >
				<view class="ul">
					<view class="li" v-for="(item,index) in list" :key="index">
						<view class="top">
							<view class="left">
								<!-- <text class="tip">主题团建</text> -->
								<text class="tit">{{item.company_name||'暂无公司名称'}}</text>
							</view>
							<text class="status">{{list_status[item.status]}}</text>
						</view>
						<view class="time">
								<image src="https://www.atuanjian.com/appletStatic/static/need/i3.png" mode="aspectFit"></image>
								<text>{{item.name||''}} {{item.phone||''}}</text>
						</view>
						<view class="bottom">
							<view class="icon">
							<image src="https://www.atuanjian.com/appletStatic/static/need/i1.png" mode="aspectFit"></image>
							<text>{{item.created_at}}</text>
								<!-- <text>陕西 西安</text> -->
							</view>
							<!-- <view class="icon">
								<image src="https://www.atuanjian.com/appletStatic/static/need/i3.png" mode="aspectFit"></image>
								<text>100人</text>
							</view> -->
						</view>
						<view class="end" v-if="item.status<2" @click="review(item)">结束回访</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal :show="show" :showCancelButton="true" confirmColor="#FFB850" content='确定结束回访吗？' @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	// customList 
	import {customList,cancelCustom} from '@/utils/request.js'
	export default {
		data() {
			return {
				// needList:[{
				// 	text:'我提交的'
				// },{
				// 	text:'我管理的'
				// }],
				// needIndex:0, 
				userInfo:null,
				categoryList:[],
				cateIndex:0,
				list:[], // 需求列表 
				page:0,
				totalPage:0,
				categoryId:'',
				list_status:[],
				show:false,
				reall:null
			}
		},
		methods: {
			// needClick(index){
			// 	if(this.needIndex!=index){
			// 		this.needIndex=index
			// 		this.getList()
			// 	}
			// },
			categoryClick(item,index){
				if(this.cateIndex!=index){
					this.cateIndex=index
					this.categoryId=item.id
					this.list=[]
					this.page=0
					this.getList()
				}
			},
			async customList(data){
				return await customList(data)
			},
			// 获取列表 api 1 
			getList(){
				let data={
					token:this.userInfo.token,
					p:this.page,
					n:10
				}
				if(this.categoryId){
					data=Object.assign(data,{
						category_id:this.categoryId
					})
				}
				this.customList(data).then(res=>{
					this.categoryId=res.category_id
					this.categoryList=res.category
					this.list=[...this.list,...res.list]
					this.list_status=res.list_status
					this.totalPage=Math.ceil(res.count/10)
					console.log('列表',res)
					// this.list
				})
			},
			async cancelCustom(data){
				return await cancelCustom(data)
			},
			cancel(){
				this.reall=null
				this.show=false
			},
			confirm(){
				let data={
					token:this.userInfo.token,
					id:this.reall.id
				}
				this.cancelCustom(data).then(res=>{
					// 完成 回访 或区
					this.page=0
					this.list=[]
					this.getList()
				})
			},
			// 回访   结束回访  api 2
			review(item){
				this.show=true
				this.reall=item 
			}
		},
		onLoad() {  
			this.userInfo= JSON.parse(uni.getStorageSync('userInfo')) 
			this.getList()
		},
		onReachBottom() {
			if(this.page<this.totalPage-1){
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F5F5F5;
}
.header{
	background-color: #FFFFFF;
	.nav{
		padding: 30rpx 128rpx 12rpx;
		@include flex_style(space-between,center,row nowrap);
		.item{ 
			padding-bottom: 12rpx;
			border-bottom: 6rpx solid #FFFFFF;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #666666;
		}
		.active{
			border-bottom-color: FFB850;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 44rpx;
			color: #FFB850;
		}
		
	}
	
}
.list{
	padding: 30rpx;
	.ul{
		@include flex_style(flex-start,center,row nowrap);
		white-space: nowrap;
		.li{
			padding: 0 44rpx;
			line-height: 64rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400; 
			color: #333333;
			margin-right: 24rpx;
		}
		.active{
			background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
			color: #FFFFFF;
		}
	}
}
.wrapper{
	padding: 0 30rpx;
	.ul{ 
		.li{
			background-color: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx 24rpx 36rpx;
			position: relative;
			margin-bottom: 24rpx;
			.top{ 
				margin-bottom: 24rpx;
				@include flex_style(space-between,center,row nowrap);
				.left{
					@include flex_style(flex-start,center,row nowrap);
					.tip{
						padding: 0 8rpx;
						background: linear-gradient(150deg, #FFB850 0%, #FFAB2C 100%);
						margin-right: 24rpx;
						font-size: 22rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 40rpx;
						color: #FFFFFF;
					}
					.tit{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 44rpx;
						color: #333333;
					}
				}
				.status{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #FF6F00;
				}
			}
			.time{
				@include flex_style(flex-start,center,row nowrap);
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #F4F4F4;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #888888;
				}
				
			}
			.bottom{
				@include flex_style(flex-start,center,row nowrap);
				padding-top: 40rpx;
				.icon{
					margin-right: 80rpx;
					@include flex_style(flex-start,center,row nowrap);
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						color: #888888;
					}
				}
			}
			.end{
				width: 160rpx;
				line-height: 50rpx;
				background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%); 
				border-radius: 36rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				position: absolute;
				bottom: 20rpx;
				right: 24rpx;
			}
		}
	}
}
::v-deep.u-modal__content__text{
	text-align: center!important;
}
</style>
